<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>添加意向学员</h2>
				<span>招生管理 > 添加意向学员</span>
			</div>
			<div class="cur-box">
				<h3>
					<span>基本信息</span>
				</h3>
				<div class="cur-basic clearfix">
					<div class="ads-info clearfix">
						<div class="camera">
							<div class="upl">本地上传</div>
						</div>
						<ul class="bs-box">
							<li>
								<input type="text" class="in-l required" placeholder="姓名">
								<input type="text" class="in-r" placeholder="别名 / 英文名">
							</li>
							<li>
								<div class="list-box b-sex" choice="mandatory">
									<div class="downbtn">
										<span>请选择性别</span>
										<em></em>
									</div>
									<ul class="dropdown-menu">
										<li class="cho-tit">请选择性别</li>
										<li>男</li>
										<li>女</li>
									</ul>
								</div>
								<b>请选择</b>
								<div class="list-box group">
									<div class="downbtn">
										<span>学员分组</span>
										<em></em>
									</div>
									<ul class="dropdown-menu">
										<li class="cho-tit">学员分组</li>
										<li>分组1</li>
										<li>分组2</li>
										<li>分组3</li>
										<li>分组4</li>
										<li>分组5</li>
									</ul>
								</div>
							</li>
							<li>
								<input id="stuTel" type="text" class="in-l required" placeholder="手机号">
								<input type="text" class="in-r" placeholder="微信号">
							</li>
							<li>
								<div class="date-ibox dr">
									<input type="text" class="in-r date-input" readOnly="true" placeholder="出生年月">
								</div>
								<div class="list-box group" choice="mandatory">
									<div class="downbtn">
										<span>信息来源</span>
										<em></em>
									</div>
									<ul class="dropdown-menu">
										<li class="cho-tit">信息来源</li>
										<li>信息来源1</li>
										<li>信息来源2</li>
										<li>信息来源3</li>
									</ul>
								</div>
							</li>
							<li>
								<input type="text" class="in-l" placeholder="紧急联系人姓名">
								<input type="text" class="in-r" placeholder="紧急联系人电话">
							</li>
							<li>
								<input type="text" class="in-a" placeholder="联系地址">
							</li>
							<li>
								<input type="text" class="in-a" placeholder="学习需求">
							</li>
							<li>
								<input type="text" class="in-a" placeholder="经济状况">
							</li>
							<li>
								<input type="text" class="in-a" placeholder="学习意愿">
							</li>
						</ul>	
					</div>
				</div>
				<h3>
					<span>相关信息</span>
				</h3>
				<div class="ad-stu clearfix">
					<div class="multiselect-box">
						<div class="mul-downbtn">
							<em></em>
							<input type="text" placeholder="搜索">
						</div>
						<div class="multiselect-down">
							<ul>
								<li>
									<span></span>
									<strong>测试1</strong>
								</li>
								<li>
									<span></span>
									<strong>测试2</strong>
								</li>
								<li>
									<span></span>
									<strong>测试3</strong>
								</li>
								<li>
									<span></span>
									<strong>测试4</strong>
								</li>
								<li>
									<span></span>
									<strong>测试5</strong>
								</li>
								<li>
									<span></span>
									<strong>测试6</strong>
								</li>
								<li>
									<span></span>
									<strong>测试7</strong>
								</li>
								<li>
									<span></span>
									<strong>测试8</strong>
								</li>
								<li>
									<span></span>
									<strong>测试10</strong>
								</li>
							</ul>
							<div class="mul-btn clearfix">
								<div class="mul-confirm">确认</div>
								<div class="mul-cancel">取消</div>
							</div>
						</div>
					</div>
					<div class="list-box" choice="mandatory">
						<div class="downbtn">
							<span>意向分店</span>
							<em></em>
						</div>
						<ul class="dropdown-menu">
							<li class="cho-tit">意向分店</li>
							<li>意向分店1</li>
							<li>意向分店2</li>
							<li>意向分店3</li>
						</ul>
					</div>
				</div>
				<div class="intention-btn">保存</div>
			</div>
		</div>
	</div>
	<script src="../js/common.js"></script>
	<script>
		$(function(){
			$('.date-list1').date_input();
			$(".date-list2").date_input();
			$(".date-input").date_input();
		});
		$('.date-list2').on("click", function() {
			updateT1();
			$('.nav span').on("click", function() {
				if ($(this).parent().parent().parent().prev().attr("class") == "date-list2") {
					updateT1();
				};
			});
		});
		$('.date-list1').on("click", function() {
			updateT2();
			$('.nav span').on("click", function() {
				if ($(this).parent().parent().parent().prev().attr("class") == "date-list1") {
					updateT2();
				};
			});
		});
		$(".intention-btn").on("click", function() {
			if(adstuSet()) {
				console.log("okokokokok");
				var postJson = {
				   	"potential_student" : [{
				      	"name" : $(".bs-box input").eq(0).val(),
				      	"alias_name" : $(".bs-box input").eq(1).val(),
				      	"sex" : $(".b-sex").find("span").text(),
				     	"学员分组" : $(".bs-box .list-box").eq(1).find("span").text(),
				     	"mobile" : $(".bs-box input").eq(2).val(),
				     	"weixin" : $(".bs-box input").eq(3).val(),
				     	"birthday" : $(".bs-box input").eq(4).val(),
				     	"source_from" : $(".bs-box .list-box").eq(2).find("span").text(),
				     	"emergency_contact" : $(".bs-box input").eq(5).val(),
				     	"emergency_mobile" : $(".bs-box input").eq(6).val(),
				     	"address" : $(".bs-box input").eq(7).val(),
				     	"learning_requirement" : $(".bs-box input").eq(8).val(),
				     	"state_of_business" : $(".bs-box input").eq(9).val(),
				     	"learning_intention" : $(".bs-box input").eq(10).val(),
				     	"意向分店" : $(".ad-stu .list-box").find("span").text(),
				     	"willing_teacher" : []
				    }]
				};
				var arr = [];
				for (var i = 0; i < $(".ad-stu .multiselect-down").find(".mul-select").length; i++) {
					arr.push($($(".ad-stu .multiselect-down").find(".mul-select")[i]).children("strong").text());
				};
				postJson.potential_student[0].willing_teacher = arr;
			}
			console.log(postJson);
		})
		// 验证是否必填
		function adstuSet() {
			var writeIn = true;
			for (var i = 0; i < $(".bs-box .required").length; i++) {
				if ($($(".required")[i]).val() == "") {
					$($(".required")[i]).css({
						"border" : "1px solid #ff5a60" 
					});
					writeIn = false;
				} else {
					$($(".required")[i]).css({
						"border" : "1px solid #9ea0b7" 
					});
				}
			}
			if ($("#stuTel").val() != "") {
				function verification(num) {
					var r = {
						user: /^1[34578]\d{9}$/
					};
					if (!r.user.test(num)) {
						return false;
					} else {
						return true;
					}
				}
				if (verification($("#stuTel").val())) {
					// 添加ajax 验证是否合格 如果不合格 则弹窗
					// alert("您的手机号已经注册过")
					// $("#stuTel").css({
					// 	"border" : "1px solid #ff5a60"
					// });
					// writeIn = false;
					

					// 如果合格则
					// $("#stuTel").css({
					// 	"border" : "1px solid #9ea0b7"
					// });
				} else {
					$("#stuTel").css({
						"border" : "1px solid #ff5a60"
					});
					writeIn = false;
				}
			};
			if ($(".b-sex").attr("choice") == "mandatory") {
				console.log($(".b-sex").next("b"));
				$(".b-sex").next("b").css({
					"display" : "inline"
				});
				writeIn = false;
			}
			if (true) {};
			// 添加 ajax 如果
			return writeIn;
		}
		/********** 放入common.js *／
		/* 多选下拉列表 */
		$(".mul-downbtn").on("click", function() {
			if (!$(this).next().hasClass("menuopen")) {
				$(this).next().addClass("menuopen");
			}
		});
		$(".multiselect-down li").on("click", function() {
			if ($(this).hasClass("mul-select")) {
				$(this).removeClass("mul-select");
			} else {
				$(this).addClass("mul-select");
			};
		});
		$(".mul-confirm").on("click", function() {
			var arr = [];
			for (var i = 0; i < $(this).parent().parent().find(".mul-select").length; i++) {
				arr.push($($(this).parent().parent().find(".mul-select")[i]).children("strong").text());
			};
			console.log(arr);
			// 在此处加入ajax 提交数据
			$(this).parent().parent().removeClass("menuopen");
		})
		$(".mul-cancel").on("click", function() {
			$(this).parent().parent().removeClass("menuopen");
		})
		$(".mul-downbtn input").on('input',function(e){
			if ($(this).val() != "") {
		  		// console.log($(this).val());
		  		$(".multiselect-down li").addClass("mul-hide");
		  		$($(".multiselect-down li:contains(" + $(this).val() + ")")).removeClass("mul-hide");
			} else {
				$(".multiselect-down li").removeClass("mul-hide");
			}
		});  
	</script>
</body>
</html>